<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>食刻日记 - 粮仓页面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
            line-height: 1.6;
            background: #F8F9FA;
            margin: 0 auto;
            position: relative;
            color: #333;
        }
        .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 24px;
        }
        .heading {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 20px;
            color: #1F2937;
            padding-bottom: 16px;
            border-bottom: 1px solid #E5E7EB;
        }
        .prototype-area {
            display: grid;
            grid-template-columns: 414px 1fr;
            gap: 32px;
            align-items: start;
        }
        .prototype-column {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }
        .description-column {
            position: sticky;
            top: 24px;
        }
        .card {
            background: white;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        .card-header {
            background: #F9FAFB;
            padding: 16px 20px;
            border-bottom: 1px solid #E5E7EB;
            font-weight: 600;
            color: #1F2937;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .card-content {
            padding: 20px;
        }
        .note {
            background: #FFF7ED;
            border: 1px solid #FFEDD5;
            padding: 16px;
            border-radius: 12px;
            margin-bottom: 20px;
            color: #9A3412;
            font-size: 14px;
            line-height: 1.6;
        }
        .prototype-preview {
            background: white;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            position: relative;
        }
        .prototype-nav {
            background: linear-gradient(135deg, #FF9898, #FFB6C1);
            color: white;
            padding: 16px 20px;
            font-size: 16px;
            font-weight: 600;
            letter-spacing: 0.5px;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }
        .prototype-content {
            padding: 16px;
            min-height: 400px;
            position: relative;
        }
        .search-bar {
            display: flex;
            background: white;
            border-radius: 12px;
            padding: 12px 16px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            border: 1px solid #E5E7EB;
        }
        .search-input {
            flex: 1;
            border: none;
            outline: none;
            font-size: 15px;
            padding: 0 12px;
            color: #1F2937;
        }
        .search-input::placeholder {
            color: #9CA3AF;
        }
        .search-btn {
            background: linear-gradient(135deg, #FF9898, #FFB6C1);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 8px 16px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: transform 0.2s ease;
        }
        .search-btn:hover {
            transform: translateY(-1px);
        }
        .dimension-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-bottom: 24px;
        }
        .dimension-card {
            background: white;
            border-radius: 16px;
            padding: 24px;
            text-align: center;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            cursor: pointer;
            border: 1px solid #E5E7EB;
        }
        .dimension-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
            border-color: #FF9898;
        }
        .dimension-icon {
            font-size: 36px;
            margin-bottom: 16px;
            color: #FF9898;
        }
        .dimension-title {
            font-size: 18px;
            font-weight: 600;
            color: #1F2937;
            margin-bottom: 8px;
        }
        .dimension-desc {
            font-size: 14px;
            color: #6B7280;
            line-height: 1.5;
        }
        .calendar-view {
            background: white;
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 24px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }
        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
            padding-bottom: 16px;
            border-bottom: 1px solid #E5E7EB;
        }
        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 12px;
        }
        .calendar-day {
            text-align: center;
            padding: 8px;
            font-size: 14px;
            color: #6B7280;
            font-weight: 500;
        }
        .calendar-date {
            text-align: center;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            border-radius: 50%;
            transition: all 0.3s ease;
        }
        .calendar-date.has-record {
            background: #FFF1F1;
            color: #FF9898;
            cursor: pointer;
        }
        .calendar-date.today {
            background: #FF9898;
            color: white;
            font-weight: 600;
        }
        .calendar-date.has-record:hover {
            background: #FF9898;
            color: white;
            transform: scale(1.1);
        }
        .food-item {
            background: white;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 12px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: center;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .food-item:hover {
            transform: translateX(4px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .food-item-image {
            width: 60px;
            height: 60px;
            border-radius: 12px;
            object-fit: cover;
            margin-right: 16px;
        }
        .food-item-info {
            flex: 1;
        }
        .food-item-name {
            font-size: 16px;
            font-weight: 600;
            color: #1F2937;
            margin-bottom: 4px;
        }
        .food-item-meta {
            font-size: 14px;
            color: #6B7280;
        }
        .requirement {
            margin-bottom: 24px;
            padding-bottom: 24px;
            border-bottom: 1px solid #E5E7EB;
        }
        .requirement:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }
        .requirement-title {
            font-size: 18px;
            font-weight: 600;
            color: #1F2937;
            margin-bottom: 12px;
        }
        .requirement-desc {
            color: #6B7280;
            font-size: 14px;
            line-height: 1.6;
        }
        .requirement-desc p {
            margin-bottom: 8px;
        }
        .requirement-desc p:last-child {
            margin-bottom: 0;
        }
        /* 移除主页面导航栏样式 */
        .prototype-content.main-page .tab-bar {
            display: none;
        }
        /* 隐藏主页面(.main-page)中的底部导航栏 */
        .prototype-preview .tab-bar {
            /* 删除隐藏CSS，改为允许显示 */
            display: flex;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            justify-content: space-around;
            align-items: center;
            height: 56px;
            background: white;
            border-top: 1px solid #eee;
            box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
            z-index: 100;
        }
        /* 更针对性地隐藏页面外的导航栏，但允许子页面显示导航栏 */
        body > .tab-bar,
        div:not(.prototype-content) > .tab-bar:not(.prototype-preview .tab-bar) {
            display: none;
        }
        /* 完全删除通用样式，防止冲突 */
        .tab-bar {
            /* 所有通用样式删除 */
        }
        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 1;
            height: 100%;
            color: #6B7280;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .tab-item:hover {
            color: #FF9898;
        }
        .tab-item.active {
            color: #FF9898;
        }
        .tab-icon {
            font-size: 24px;
            margin-bottom: 4px;
        }
        .tab-text {
            font-size: 12px;
            font-weight: 500;
        }
        .tab-bar.main-page-tab {
            /* 删除此样式块 */
        }
        .tab-bar.main-page-tab .tab-item {
            /* 删除此样式块 */
        }
        .tab-bar.main-page-tab .tab-item:hover {
            /* 删除此样式块 */
        }
        .tab-bar.main-page-tab .tab-item.active {
            /* 删除此样式块 */
        }
        .tab-bar.main-page-tab .tab-icon {
            /* 删除此样式块 */
        }
        .tab-bar.main-page-tab .tab-text {
            /* 删除此样式块 */
        }
        /* 隐藏所有导航栏 - 最高优先级规则 */
        body > .tab-bar,
        div:not(.prototype-content) > .tab-bar,
        .prototype-area > .tab-bar,
        .prototype-preview + .tab-bar,
        .prototype-content.main-page .tab-bar,
        #tab-bar-outside-content {
            /* 删除此样式块 */
        }

        /* 子页面导航栏特殊强制显示 */
        .prototype-content:not(.main-page) .tab-bar {
            /* 此样式已在前面正确定义，删除重复定义 */
        }

        /* 清除所有其他导航栏样式以防冲突 */
        .tab-bar {
            /* 所有样式清除 */
        }

        /* 主页面隐藏导航栏 */
        .prototype-content.main-page .tab-bar {
            display: none;
        }

        /* 子页面固定底部导航栏 */
        .prototype-content:not(.main-page) .tab-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 56px;
            background: white;
            border-top: 1px solid #eee;
            box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
            z-index: 100;
        }

        /* 导航项样式 */
        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 1;
            height: 100%;
            color: #6B7280;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .tab-item:hover {
            color: #FF9898;
        }

        .tab-item.active {
            color: #FF9898;
        }

        .tab-icon {
            font-size: 24px;
            margin-bottom: 4px;
        }

        .tab-text {
            font-size: 12px;
            font-weight: 500;
        }

        /* 只在原型预览内的导航栏才显示（防止外部导航栏） */
        body > .tab-bar,
        .container > .tab-bar,
        .prototype-area > .tab-bar,
        .heading + .tab-bar,
        div:not(.prototype-content):not(.prototype-preview) > .tab-bar {
            display: none !important;
            visibility: hidden !important;
        }

        /* 主页面隐藏导航栏 */
        .prototype-content.main-page .tab-bar {
            display: none;
        }

        /* 子页面底部导航栏修改 */
        .prototype-content:not(.main-page) .tab-bar {
            position: absolute; /* 从fixed改为absolute，相对于.prototype-content */
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%; 
            display: flex !important;
            justify-content: space-around;
            align-items: center;
            height: 56px;
            background: white;
            border-top: 1px solid #eee;
            box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
            z-index: 100;
        }

        /* 调整原型内容区域，为底部导航栏留出空间 */
        .prototype-content:not(.main-page) {
            padding-bottom: 72px; /* 56px导航栏高度 + 16px原有padding */
            min-height: 472px; /* 400px原高度 + 72px底部空间 */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="heading">界面原型-粮仓页面</div>
        
        <div class="card">
            <div class="card-header">
                <span>设计说明</span>
            </div>
            <div class="card-content">
                <div class="note">
                    <strong>设计说明：</strong> 粮仓页面实现了仓库模块功能，提供了多维度数据管理、智能搜索功能，帮助用户全面掌握自己的饮食记录。
                </div>
            </div>
        </div>

        <div class="prototype-area">
            <div class="prototype-column">
                <div class="card">
                    <div class="card-header">
                        <span>粮仓页面 - 维度选择</span>
                    </div>
                    <div class="card-content">
                        <div class="prototype-preview">
                            <div class="prototype-nav">
                                📊 饮食记录 - 维度选择
                            </div>
                            <div class="prototype-content main-page">
                                <div style="padding: 0 16px;">
                                    <div style="margin-bottom: 24px; text-align: center;">
                                        <div style="font-size: 20px; font-weight: 500; margin-bottom: 6px; color: #333;">浏览记录</div>
                                        <div style="font-size: 14px; color: #999; margin-bottom: 20px;">选择一种方式查看您的饮食记录</div>
                                    </div>
                                    
                                    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 32px;">
                                        <div style="background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.08); transition: transform 0.2s; cursor: pointer;" onmouseover="this.style.transform='translateY(-5px)'" onmouseout="this.style.transform='translateY(0)'">
                                            <div style="height: 100px; position: relative; overflow: hidden;">
                                                <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255,152,152,0.9), rgba(255,182,193,0.9));">
                                                    <div style="position: absolute; bottom: -15px; right: -15px; font-size: 80px; opacity: 0.2;">📅</div>
                                                </div>
                                                <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 16px;">
                                                    <div style="font-size: 32px; margin-bottom: 8px; text-shadow: 0 2px 4px rgba(0,0,0,0.1);">📅</div>
                                                    <div style="font-size: 16px; font-weight: 500; color: white;">时间维度</div>
                                                </div>
                                            </div>
                                            <div style="padding: 12px 16px; text-align: center;">
                                                <div style="font-size: 13px; color: #666; line-height: 1.4;">按日期浏览您的饮食记录，查看每日餐饮情况</div>
                                            </div>
                                        </div>
                                        
                                        <div style="background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.08); transition: transform 0.2s; cursor: pointer;" onmouseover="this.style.transform='translateY(-5px)'" onmouseout="this.style.transform='translateY(0)'">
                                            <div style="height: 100px; position: relative; overflow: hidden;">
                                                <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255,152,152,0.9), rgba(255,182,193,0.9));">
                                                    <div style="position: absolute; bottom: -15px; right: -15px; font-size: 80px; opacity: 0.2;">💰</div>
                                                </div>
                                                <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 16px;">
                                                    <div style="font-size: 32px; margin-bottom: 8px; text-shadow: 0 2px 4px rgba(0,0,0,0.1);">💰</div>
                                                    <div style="font-size: 16px; font-weight: 500; color: white;">价格维度</div>
                                                </div>
                                            </div>
                                            <div style="padding: 12px 16px; text-align: center;">
                                                <div style="font-size: 13px; color: #666; line-height: 1.4;">按价格区间分类，了解不同消费水平的餐饮选择</div>
                                            </div>
                                        </div>
                                        
                                        <div style="background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.08); transition: transform 0.2s; cursor: pointer;" onmouseover="this.style.transform='translateY(-5px)'" onmouseout="this.style.transform='translateY(0)'">
                                            <div style="height: 100px; position: relative; overflow: hidden;">
                                                <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255,152,152,0.9), rgba(255,182,193,0.9));">
                                                    <div style="position: absolute; bottom: -15px; right: -15px; font-size: 80px; opacity: 0.2;">🏷️</div>
                                                </div>
                                                <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 16px;">
                                                    <div style="font-size: 32px; margin-bottom: 8px; text-shadow: 0 2px 4px rgba(0,0,0,0.1);">🏷️</div>
                                                    <div style="font-size: 16px; font-weight: 500; color: white;">标签维度</div>
                                                </div>
                                            </div>
                                            <div style="padding: 12px 16px; text-align: center;">
                                                <div style="font-size: 13px; color: #666; line-height: 1.4;">按食物类型、口味等标签分类浏览您的饮食记录</div>
                                            </div>
                                        </div>
                                        
                                        <div style="background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.08); transition: transform 0.2s; cursor: pointer;" onmouseover="this.style.transform='translateY(-5px)'" onmouseout="this.style.transform='translateY(0)'">
                                            <div style="height: 100px; position: relative; overflow: hidden;">
                                                <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255,152,152,0.9), rgba(255,182,193,0.9));">
                                                    <div style="position: absolute; bottom: -15px; right: -15px; font-size: 80px; opacity: 0.2;">📸</div>
                                                </div>
                                                <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 16px;">
                                                    <div style="font-size: 32px; margin-bottom: 8px; text-shadow: 0 2px 4px rgba(0,0,0,0.1);">📸</div>
                                                    <div style="font-size: 16px; font-weight: 500; color: white;">照片墙</div>
                                                </div>
                                            </div>
                                            <div style="padding: 12px 16px; text-align: center;">
                                                <div style="font-size: 13px; color: #666; line-height: 1.4;">图片瀑布流形式浏览您拍摄的美食照片记录</div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div style="background: rgba(255,152,152,0.05); border: 1px dashed #FF9898; border-radius: 12px; padding: 16px; margin-bottom: 16px; display: flex; align-items: center;">
                                        <div style="width: 40px; height: 40px; border-radius: 50%; background: rgba(255,152,152,0.1); display: flex; align-items: center; justify-content: center; margin-right: 16px;">
                                            <div style="font-size: 20px;">🔍</div>
                                        </div>
                                        <div style="flex: 1;">
                                            <div style="font-size: 15px; font-weight: 500; color: #333; margin-bottom: 4px;">快速搜索</div>
                                            <div style="font-size: 13px; color: #666;">尝试输入"昨天的早餐"、"20元以下的面食"</div>
                                        </div>
                                        <div style="width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: #FF9898; cursor: pointer;">
                                            <div style="font-size: 18px;">❯</div>
                                        </div>
                                    </div>
                                    
                                    <!-- 子页面导航栏 -->
                                    <div class="tab-bar">
                                        <a href="index.html" class="tab-item">
                                            <div class="tab-icon">🏠</div>
                                            <div class="tab-text">首页</div>
                                        </a>
                                        <a class="tab-item active">
                                            <div class="tab-icon">🌾</div>
                                            <div class="tab-text">粮仓</div>
                                        </a>
                                        <a href="community.html" class="tab-item">
                                            <div class="tab-icon">🍽️</div>
                                            <div class="tab-text">食坛</div>
                                        </a>
                                        <a href="profile.html" class="tab-item">
                                            <div class="tab-icon">👤</div>
                                            <div class="tab-text">我的</div>
                                        </a>
                                    </div>
                                    
                                    <!-- 主页面底部导航栏 -->
                                    <div class="tab-bar main-page-tab">
                                        <a href="index.html" class="tab-item">
                                            <div class="tab-icon">🏠</div>
                                            <div class="tab-text">首页</div>
                                        </a>
                                        <div class="tab-item active">
                                            <div class="tab-icon">🌾</div>
                                            <div class="tab-text">粮仓</div>
                                        </div>
                                        <a href="community.html" class="tab-item">
                                            <div class="tab-icon">🍽️</div>
                                            <div class="tab-text">食坛</div>
                                        </a>
                                        <a href="profile.html" class="tab-item">
                                            <div class="tab-icon">👤</div>
                                            <div class="tab-text">我的</div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <span>粮仓页面 - 时间维度 - 日历视图</span>
                    </div>
                    <div class="card-content">
                        <div class="prototype-preview">
                            <div class="prototype-nav">
                                🌾 饮食记录 - 时间维度 - 日历视图
                            </div>
                            <div class="prototype-content">
                                <div style="display: flex; align-items: center; padding: 12px 0; margin-bottom: 16px; cursor: pointer; transition: all 0.3s ease;" class="back-nav" onclick="handleBackNavigation()">
                                    <div style="display: flex; align-items: center;">
                                        <span style="font-size: 18px; margin-right: 8px;">←</span>
                                        <span style="font-size: 14px; color: #1F2937;">返回维度选择</span>
                                    </div>
                                </div>

                                <div style="margin-bottom: 16px;">
                                    <div style="font-size: 16px; font-weight: 500; margin-bottom: 8px;">时间维度视图</div>
                                    <div style="display: flex; gap: 8px; flex-wrap: wrap;">
                                        <div style="background: #FF9898; color: white; border-radius: 20px; padding: 6px 12px; font-size: 14px;">日历视图</div>
                                    </div>
                                </div>

                                <div class="calendar-view">
                                    <div class="calendar-header">
                                        <div style="font-size: 16px; font-weight: 500;">2023年11月</div>
                                        <div style="display: flex; gap: 8px;">
                                            <div style="font-size: 16px; cursor: pointer;">◀</div>
                                            <div style="font-size: 16px; cursor: pointer;">▶</div>
                                        </div>
                                    </div>
                                    <div class="calendar-grid">
                                        <div class="calendar-day">日</div>
                                        <div class="calendar-day">一</div>
                                        <div class="calendar-day">二</div>
                                        <div class="calendar-day">三</div>
                                        <div class="calendar-day">四</div>
                                        <div class="calendar-day">五</div>
                                        <div class="calendar-day">六</div>
                                        
                                        <div class="calendar-date"></div>
                                        <div class="calendar-date"></div>
                                        <div class="calendar-date"></div>
                                        <div class="calendar-date">1</div>
                                        <div class="calendar-date">2</div>
                                        <div class="calendar-date has-record" style="cursor: pointer;">3</div>
                                        <div class="calendar-date">4</div>
                                        
                                        <div class="calendar-date">5</div>
                                        <div class="calendar-date has-record" style="cursor: pointer;">6</div>
                                        <div class="calendar-date">7</div>
                                        <div class="calendar-date has-record" style="cursor: pointer;">8</div>
                                        <div class="calendar-date">9</div>
                                        <div class="calendar-date has-record" style="cursor: pointer;">10</div>
                                        <div class="calendar-date">11</div>
                                        
                                        <div class="calendar-date">12</div>
                                        <div class="calendar-date has-record" style="cursor: pointer;">13</div>
                                        <div class="calendar-date has-record" style="cursor: pointer;">14</div>
                                        <div class="calendar-date today has-record" style="cursor: pointer;">15</div>
                                        <div class="calendar-date">16</div>
                                        <div class="calendar-date">17</div>
                                        <div class="calendar-date">18</div>
                                    </div>
                                </div>

                                <div style="display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;">
                                    <div style="padding: 6px 12px; background: #FF9898; color: white; border-radius: 16px; font-size: 13px;">全部</div>
                                    <div style="padding: 6px 12px; background: #F3F4F6; color: #6B7280; border-radius: 16px; font-size: 13px;">早餐</div>
                                    <div style="padding: 6px 12px; background: #F3F4F6; color: #6B7280; border-radius: 16px; font-size: 13px;">午餐</div>
                                    <div style="padding: 6px 12px; background: #F3F4F6; color: #6B7280; border-radius: 16px; font-size: 13px;">晚餐</div>
                                    <div style="padding: 6px 12px; background: #F3F4F6; color: #6B7280; border-radius: 16px; font-size: 13px;">小食</div>
                                </div>

                                <div style="text-align: center; padding: 16px; background: white; border-radius: 12px; color: #6B7280; font-size: 14px; cursor: pointer; transition: all 0.3s ease;" onmouseover="this.style.background='#F9FAFB'" onmouseout="this.style.background='white'">
                                    加载更多照片...
                                </div>

                                <!-- 子页面导航栏 -->
                                <div class="tab-bar">
                                    <a href="index.html" class="tab-item">
                                        <div class="tab-icon">🏠</div>
                                        <div class="tab-text">首页</div>
                                    </a>
                                    <div class="tab-item active">
                                        <div class="tab-icon">🌾</div>
                                        <div class="tab-text">粮仓</div>
                                    </div>
                                    <a href="community.html" class="tab-item">
                                        <div class="tab-icon">🍽️</div>
                                        <div class="tab-text">食坛</div>
                                    </a>
                                    <a href="profile.html" class="tab-item">
                                        <div class="tab-icon">👤</div>
                                        <div class="tab-text">我的</div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <span>粮仓页面 - 时间维度 - 日期详情</span>
                    </div>
                    <div class="card-content">
                        <div class="prototype-preview">
                            <div class="prototype-nav">
                                🌾 饮食记录 - 时间维度 - 日期详情
                            </div>
                            <div class="prototype-content">
                                <div style="display: flex; align-items: center; margin-bottom: 16px;">
                                    <div style="font-size: 18px; font-weight: 500; margin-right: auto;">11月15日记录</div>
                                    <div style="font-size: 14px; color: #666; cursor: pointer;">返回日历</div>
                                </div>

                                <div style="background: white; border-radius: 8px; margin-bottom: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.05);">
                                    <div style="padding: 12px; display: flex; align-items: center;">
                                        <div style="width: 50px; height: 50px; border-radius: 4px; margin-right: 12px; background-image: url('https://via.placeholder.com/150/FF9898/FFFFFF?text=食品图片'); background-size: cover;"></div>
                                        <div style="flex: 1;">
                                            <div style="font-size: 15px; font-weight: 500;">红烧牛肉面 🍜</div>
                                            <div style="font-size: 12px; color: #999;">今日午餐 · ¥26.5</div>
                                        </div>
                                        <div style="color: #999; font-size: 16px;">❯</div>
                                    </div>
                                </div>

                                <div style="background: white; border-radius: 8px; margin-bottom: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.05);">
                                    <div style="padding: 12px; display: flex; align-items: center;">
                                        <div style="width: 50px; height: 50px; border-radius: 4px; margin-right: 12px; background-image: url('https://via.placeholder.com/150/FF9898/FFFFFF?text=食品图片'); background-size: cover;"></div>
                                        <div style="flex: 1;">
                                            <div style="font-size: 15px; font-weight: 500;">豆浆油条 🥢</div>
                                            <div style="font-size: 12px; color: #999;">今日早餐 · ¥8.0</div>
                                        </div>
                                        <div style="color: #999; font-size: 16px;">❯</div>
                                    </div>
                                </div>

                                <!-- <div class="export-buttons">
                                    <div class="export-btn">
                                        <div class="export-icon">📊</div>
                                        <div>PDF周报</div>
                                    </div>
                                    <div class="export-btn">
                                        <div class="export-icon">📑</div>
                                        <div>Excel导出</div>
                                    </div>
                                </div> -->
                                
                                <!-- 添加子页面导航栏 -->
                                <div class="tab-bar">
                                    <a href="index.html" class="tab-item">
                                        <div class="tab-icon">🏠</div>
                                        <div class="tab-text">首页</div>
                                    </a>
                                    <div class="tab-item active">
                                        <div class="tab-icon">🌾</div>
                                        <div class="tab-text">粮仓</div>
                                    </div>
                                    <a href="community.html" class="tab-item">
                                        <div class="tab-icon">🍽️</div>
                                        <div class="tab-text">食坛</div>
                                    </a>
                                    <a href="profile.html" class="tab-item">
                                        <div class="tab-icon">👤</div>
                                        <div class="tab-text">我的</div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <span>粮仓页面 - 价格维度 - 价格区间选择</span>
                    </div>
                    <div class="card-content">
                        <div class="prototype-preview">
                            <div class="prototype-nav">
                                🌾 饮食记录 - 价格维度 - 价格区间
                            </div>
                            <div class="prototype-content">
                                <div class="list-header">
                                    <div class="list-title">价格区间</div>
                                    <div class="list-subtitle">选择价格区间浏览</div>
                                </div>

                                <div style="padding: 0 16px;">
                                    <div style="background: white; border-radius: 12px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-bottom: 16px;">
                                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
                                            <div style="font-size: 15px; color: #333; font-weight: 500;">价格筛选</div>
                                            <div style="font-size: 14px; color: #FF9898;">重置</div>
                                        </div>
                                        
                                        <div style="margin-bottom: 20px;">
                                            <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                                                <div style="font-size: 13px; color: #666;">¥0</div>
                                                <div style="font-size: 13px; color: #666;">¥200+</div>
                                            </div>
                                            <div style="position: relative; height: 6px; background: #F0F0F0; border-radius: 3px;">
                                                <div style="position: absolute; left: 0; top: 0; width: 70%; height: 100%; background: linear-gradient(45deg, #FF9898, #FFB6C1); border-radius: 3px;"></div>
                                                <div style="position: absolute; left: 0%; top: -5px; width: 16px; height: 16px; background: white; border: 2px solid #FF9898; border-radius: 50%;"></div>
                                                <div style="position: absolute; left: 70%; top: -5px; width: 16px; height: 16px; background: white; border: 2px solid #FF9898; border-radius: 50%;"></div>
                                            </div>
                                        </div>
                                        
                                        <div style="display: flex; justify-content: space-between; align-items: center;">
                                            <div style="display: flex; align-items: center; border: 1px solid #eee; border-radius: 8px; padding: 8px 12px; width: 45%;">
                                                <span style="color: #999;">¥</span>
                                                <span style="margin-left: 4px; font-weight: 500;">0</span>
                                            </div>
                                            <div style="color: #999;">至</div>
                                            <div style="display: flex; align-items: center; border: 1px solid #eee; border-radius: 8px; padding: 8px 12px; width: 45%;">
                                                <span style="color: #999;">¥</span>
                                                <span style="margin-left: 4px; font-weight: 500;">140</span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div style="margin-bottom: 16px;">
                                        <div style="font-size: 15px; color: #333; font-weight: 500; margin-bottom: 12px;">快速选择</div>
                                        <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
                                            <div style="background: white; border-radius: 10px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border: 2px solid #FF9898;">
                                                <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;">
                                                    <div style="font-size: 14px; font-weight: 500; color: #333;">经济实惠</div>
                                                    <div style="width: 18px; height: 18px; border-radius: 50%; border: 2px solid #FF9898; display: flex; align-items: center; justify-content: center;">
                                                        <div style="width: 10px; height: 10px; background: #FF9898; border-radius: 50%;"></div>
                                                    </div>
                                                </div>
                                                <div style="font-size: 13px; color: #999;">¥0 - ¥30</div>
                                            </div>
                                            
                                            <div style="background: white; border-radius: 10px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
                                                <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;">
                                                    <div style="font-size: 14px; font-weight: 500; color: #333;">中等消费</div>
                                                    <div style="width: 18px; height: 18px; border-radius: 50%; border: 2px solid #ddd;"></div>
                                                </div>
                                                <div style="font-size: 13px; color: #999;">¥30 - ¥60</div>
                                            </div>
                                            
                                            <div style="background: white; border-radius: 10px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
                                                <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;">
                                                    <div style="font-size: 14px; font-weight: 500; color: #333;">品质优选</div>
                                                    <div style="width: 18px; height: 18px; border-radius: 50%; border: 2px solid #ddd;"></div>
                                                </div>
                                                <div style="font-size: 13px; color: #999;">¥60 - ¥100</div>
                                            </div>
                                            
                                            <div style="background: white; border-radius: 10px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
                                                <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;">
                                                    <div style="font-size: 14px; font-weight: 500; color: #333;">高端享受</div>
                                                    <div style="width: 18px; height: 18px; border-radius: 50%; border: 2px solid #ddd;"></div>
                                                </div>
                                                <div style="font-size: 13px; color: #999;">¥100以上</div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <button style="width: 100%; background: linear-gradient(45deg, #FF9898, #FFB6C1); color: white; border: none; padding: 14px 0; border-radius: 25px; font-size: 16px; font-weight: 500; box-shadow: 0 4px 12px rgba(255, 152, 152, 0.3);">
                                        确认选择
                                    </button>
                                </div>
                                
                                <!-- 底部导航栏 -->
                                <div class="tab-bar">
                                    <a href="index.html" class="tab-item">
                                        <div class="tab-icon">🏠</div>
                                        <div class="tab-text">首页</div>
                                    </a>
                                    <a class="tab-item active">
                                        <div class="tab-icon">🌾</div>
                                        <div class="tab-text">粮仓</div>
                                    </a>
                                    <a href="community.html" class="tab-item">
                                        <div class="tab-icon">🍽️</div>
                                        <div class="tab-text">食坛</div>
                                    </a>
                                    <a href="profile.html" class="tab-item">
                                        <div class="tab-icon">👤</div>
                                        <div class="tab-text">我的</div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <span>粮仓页面 - 标签维度 - 标签选择</span>
                    </div>
                    <div class="card-content">
                        <div class="prototype-preview">
                            <div class="prototype-nav">
                                🌾 饮食记录 - 标签维度 - 标签选择
                            </div>
                            <div class="prototype-content">
                                <div class="list-header">
                                    <div class="list-title">标签分类</div>
                                    <div class="list-subtitle">选择标签浏览</div>
                                </div>

                                <div style="padding: 0 16px;">
                                    <div style="margin-bottom: 24px;">
                                        <div style="background: white; border-radius: 8px; margin-bottom: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
                                            <div style="display: flex; align-items: center; padding: 12px; border-bottom: 1px solid #f5f5f5;">
                                                <div style="background: rgba(255,152,152,0.1); color: #FF9898; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; margin-right: 12px;">
                                                    <span style="font-size: 20px;">🍚</span>
                                                </div>
                                                <div style="flex: 1;">
                                                    <div style="font-size: 16px; font-weight: 500; color: #333; margin-bottom: 4px;">食物类型</div>
                                                    <div style="font-size: 13px; color: #999;">按食物种类分类</div>
                                                </div>
                                                <div style="transform: rotate(90deg); color: #ccc; font-size: 18px;">❯</div>
                                            </div>
                                            
                                            <div style="padding: 16px;">
                                                <div style="display: flex; flex-wrap: wrap; gap: 10px;">
                                                    <div style="background: rgba(255,152,152,0.1); color: #FF9898; padding: 8px 16px; border-radius: 20px; font-size: 14px; display: flex; align-items: center;">
                                                        <span style="margin-right: 4px;">🍚</span>主食
                                                    </div>
                                                    <div style="background: #f5f5f5; color: #666; padding: 8px 16px; border-radius: 20px; font-size: 14px; display: flex; align-items: center;">
                                                        <span style="margin-right: 4px;">🍜</span>面食
                                                    </div>
                                                    <div style="background: #f5f5f5; color: #666; padding: 8px 16px; border-radius: 20px; font-size: 14px; display: flex; align-items: center;">
                                                        <span style="margin-right: 4px;">🥗</span>蔬菜
                                                    </div>
                                                    <div style="background: #f5f5f5; color: #666; padding: 8px 16px; border-radius: 20px; font-size: 14px; display: flex; align-items: center;">
                                                        <span style="margin-right: 4px;">🍖</span>肉类
                                                    </div>
                                                    <div style="background: #f5f5f5; color: #666; padding: 8px 16px; border-radius: 20px; font-size: 14px; display: flex; align-items: center;">
                                                        <span style="margin-right: 4px;">🥘</span>小吃
                                                    </div>
                                                    <div style="background: #f5f5f5; color: #666; padding: 8px 16px; border-radius: 20px; font-size: 14px; display: flex; align-items: center;">
                                                        <span style="margin-right: 4px;">🧋</span>饮品
                                                    </div>
                                                    <div style="background: #f5f5f5; color: #666; padding: 8px 16px; border-radius: 20px; font-size: 14px; display: flex; align-items: center;">
                                                        <span style="margin-right: 4px;">🍰</span>甜点
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div style="background: white; border-radius: 8px; margin-bottom: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
                                            <div style="display: flex; align-items: center; padding: 12px; border-bottom: 1px solid #f5f5f5;">
                                                <div style="background: rgba(255,152,152,0.1); color: #FF9898; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; margin-right: 12px;">
                                                    <span style="font-size: 20px;">🌶️</span>
                                                </div>
                                                <div style="flex: 1;">
                                                    <div style="font-size: 16px; font-weight: 500; color: #333; margin-bottom: 4px;">菜系风味</div>
                                                    <div style="font-size: 13px; color: #999;">按口味和菜系分类</div>
                                                </div>
                                                <div style="transform: rotate(0deg); color: #ccc; font-size: 18px;">❯</div>
                                            </div>
                                        </div>
                                        
                                        <div style="background: white; border-radius: 8px; margin-bottom: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
                                            <div style="display: flex; align-items: center; padding: 12px; border-bottom: 1px solid #f5f5f5;">
                                                <div style="background: rgba(255,152,152,0.1); color: #FF9898; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; margin-right: 12px;">
                                                    <span style="font-size: 20px;">⏰</span>
                                                </div>
                                                <div style="flex: 1;">
                                                    <div style="font-size: 16px; font-weight: 500; color: #333; margin-bottom: 4px;">用餐时段</div>
                                                    <div style="font-size: 13px; color: #999;">按早餐/午餐/晚餐分类</div>
                                                </div>
                                                <div style="transform: rotate(0deg); color: #ccc; font-size: 18px;">❯</div>
                                            </div>
                                        </div>
                                        
                                        <div style="background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
                                            <div style="display: flex; align-items: center; padding: 12px; border-bottom: 1px solid #f5f5f5;">
                                                <div style="background: rgba(255,152,152,0.1); color: #FF9898; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; margin-right: 12px;">
                                                    <span style="font-size: 20px;">❤️</span>
                                                </div>
                                                <div style="flex: 1;">
                                                    <div style="font-size: 16px; font-weight: 500; color: #333; margin-bottom: 4px;">健康属性</div>
                                                    <div style="font-size: 13px; color: #999;">按营养成分和健康属性分类</div>
                                                </div>
                                                <div style="transform: rotate(0deg); color: #ccc; font-size: 18px;">❯</div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div style="background: white; border-radius: 12px; padding: 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-bottom: 24px;">
                                        <div style="font-size: 15px; color: #333; font-weight: 500; margin-bottom: 12px;">已选标签</div>
                                        <div style="display: flex; flex-wrap: wrap; gap: 10px;">
                                            <div style="background: rgba(255,152,152,0.1); color: #FF9898; padding: 6px 12px; border-radius: 16px; font-size: 13px; display: flex; align-items: center;">
                                                <span style="margin-right: 4px;">🍚</span>主食
                                                <span style="margin-left: 4px; font-size: 16px;">×</span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <button style="width: 100%; background: linear-gradient(45deg, #FF9898, #FFB6C1); color: white; border: none; padding: 14px 0; border-radius: 25px; font-size: 16px; font-weight: 500; box-shadow: 0 4px 12px rgba(255, 152, 152, 0.3);">
                                        查看对应餐品 (24)
                                    </button>
                                </div>
                                
                                <!-- 底部导航栏 -->
                                <div class="tab-bar">
                                    <a href="index.html" class="tab-item">
                                        <div class="tab-icon">🏠</div>
                                        <div class="tab-text">首页</div>
                                    </a>
                                    <div class="tab-item active">
                                        <div class="tab-icon">🌾</div>
                                        <div class="tab-text">粮仓</div>
                                    </div>
                                    <a href="community.html" class="tab-item">
                                        <div class="tab-icon">🍽️</div>
                                        <div class="tab-text">食坛</div>
                                    </a>
                                    <a href="profile.html" class="tab-item">
                                        <div class="tab-icon">👤</div>
                                        <div class="tab-text">我的</div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <span>粮仓页面 - 照片墙</span>
                    </div>
                    <div class="card-content">
                        <div class="prototype-preview">
                            <div class="prototype-nav">
                                🌾 饮食记录 - 照片墙
                            </div>
                            <div class="prototype-content">
                                <div style="display: flex; align-items: center; padding: 12px 0; margin-bottom: 16px; cursor: pointer; transition: all 0.3s ease;" class="back-nav" onclick="handleBackNavigation()">
                                    <div style="display: flex; align-items: center;">
                                        <span style="font-size: 18px; margin-right: 8px;">←</span>
                                        <span style="font-size: 14px; color: #1F2937;">返回维度选择</span>
                                    </div>
                                </div>

                                <div style="margin-bottom: 20px;">
                                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
                                        <div>
                                            <div style="font-size: 18px; font-weight: 500; color: #1F2937; margin-bottom: 4px;">照片墙</div>
                                            <div style="font-size: 14px; color: #6B7280;">共 24 张美食照片</div>
                                        </div>
                                        <div style="display: flex; gap: 8px;">
                                            <div style="padding: 8px 16px; background: white; border-radius: 20px; font-size: 14px; color: #1F2937; cursor: pointer; display: flex; align-items: center; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
                                                <span style="margin-right: 4px;">🗓️</span>
                                                <span>时间</span>
                                            </div>
                                            <div style="padding: 8px 16px; background: white; border-radius: 20px; font-size: 14px; color: #1F2937; cursor: pointer; display: flex; align-items: center; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
                                                <span style="margin-right: 4px;">💰</span>
                                                <span>价格</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div style="display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;">
                                        <div style="padding: 6px 12px; background: #FF9898; color: white; border-radius: 16px; font-size: 13px;">全部</div>
                                        <div style="padding: 6px 12px; background: #F3F4F6; color: #6B7280; border-radius: 16px; font-size: 13px;">早餐</div>
                                        <div style="padding: 6px 12px; background: #F3F4F6; color: #6B7280; border-radius: 16px; font-size: 13px;">午餐</div>
                                        <div style="padding: 6px 12px; background: #F3F4F6; color: #6B7280; border-radius: 16px; font-size: 13px;">晚餐</div>
                                        <div style="padding: 6px 12px; background: #F3F4F6; color: #6B7280; border-radius: 16px; font-size: 13px;">小食</div>
                                    </div>
                                </div>

                                <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px;">
                                    <div style="background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.05); cursor: pointer; transition: transform 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'" onmouseout="this.style.transform='translateY(0)'">
                                        <div style="position: relative; padding-bottom: 100%;">
                                            <img src="https://via.placeholder.com/400/FF9898/FFFFFF?text=美食照片" alt="食物图片" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;">
                                        </div>
                                        <div style="padding: 12px;">
                                            <div style="font-size: 15px; font-weight: 500; color: #1F2937; margin-bottom: 4px;">寿司拼盘 🍱</div>
                                            <div style="display: flex; justify-content: space-between; align-items: center;">
                                                <div style="font-size: 13px; color: #6B7280;">今日午餐</div>
                                                <div style="font-size: 13px; color: #FF9898;">¥45</div>
                                            </div>
                                        </div>
                                    </div>

                                    <div style="background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.05); cursor: pointer; transition: transform 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'" onmouseout="this.style.transform='translateY(0)'">
                                        <div style="position: relative; padding-bottom: 100%;">
                                            <img src="https://via.placeholder.com/400/FF9898/FFFFFF?text=美食照片" alt="食物图片" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;">
                                        </div>
                                        <div style="padding: 12px;">
                                            <div style="font-size: 15px; font-weight: 500; color: #1F2937; margin-bottom: 4px;">抹茶蛋糕 🍰</div>
                                            <div style="display: flex; justify-content: space-between; align-items: center;">
                                                <div style="font-size: 13px; color: #6B7280;">今日下午茶</div>
                                                <div style="font-size: 13px; color: #FF9898;">¥28</div>
                                            </div>
                                        </div>
                                    </div>

                                    <div style="background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.05); cursor: pointer; transition: transform 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'" onmouseout="this.style.transform='translateY(0)'">
                                        <div style="position: relative; padding-bottom: 100%;">
                                            <img src="https://via.placeholder.com/400/FF9898/FFFFFF?text=美食照片" alt="食物图片" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;">
                                        </div>
                                        <div style="padding: 12px;">
                                            <div style="font-size: 15px; font-weight: 500; color: #1F2937; margin-bottom: 4px;">牛肉面 🍜</div>
                                            <div style="display: flex; justify-content: space-between; align-items: center;">
                                                <div style="font-size: 13px; color: #6B7280;">昨日午餐</div>
                                                <div style="font-size: 13px; color: #FF9898;">¥32</div>
                                            </div>
                                        </div>
                                    </div>

                                    <div style="background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.05); cursor: pointer; transition: transform 0.2s ease;" onmouseover="this.style.transform='translateY(-4px)'" onmouseout="this.style.transform='translateY(0)'">
                                        <div style="position: relative; padding-bottom: 100%;">
                                            <img src="https://via.placeholder.com/400/FF9898/FFFFFF?text=美食照片" alt="食物图片" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;">
                                        </div>
                                        <div style="padding: 12px;">
                                            <div style="font-size: 15px; font-weight: 500; color: #1F2937; margin-bottom: 4px;">水果茶 🧋</div>
                                            <div style="display: flex; justify-content: space-between; align-items: center;">
                                                <div style="font-size: 13px; color: #6B7280;">昨日下午茶</div>
                                                <div style="font-size: 13px; color: #FF9898;">¥22</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div style="text-align: center; padding: 16px; background: white; border-radius: 12px; color: #6B7280; font-size: 14px; cursor: pointer; transition: all 0.3s ease;" onmouseover="this.style.background='#F9FAFB'" onmouseout="this.style.background='white'">
                                    加载更多照片...
                                </div>

                                <!-- 子页面导航栏 -->
                                <div class="tab-bar">
                                    <a href="index.html" class="tab-item">
                                        <div class="tab-icon">🏠</div>
                                        <div class="tab-text">首页</div>
                                    </a>
                                    <div class="tab-item active">
                                        <div class="tab-icon">🌾</div>
                                        <div class="tab-text">粮仓</div>
                                    </div>
                                    <a href="community.html" class="tab-item">
                                        <div class="tab-icon">🍽️</div>
                                        <div class="tab-text">食坛</div>
                                    </a>
                                    <a href="profile.html" class="tab-item">
                                        <div class="tab-icon">👤</div>
                                        <div class="tab-text">我的</div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <span>粮仓页面 - 餐品详情</span>
                    </div>
                    <div class="card-content">
                        <div class="prototype-preview">
                            <div class="prototype-nav">
                                🌾 饮食记录 - 餐品详情
                            </div>
                            <div class="prototype-content">
                                <div style="display: flex; align-items: center; margin-bottom: 16px;">
                                    <div style="font-size: 18px; font-weight: 500; margin-right: auto;">红烧牛肉面</div>
                                    <div style="font-size: 14px; color: #666; cursor: pointer;">返回列表</div>
                                </div>

                                <div style="background: white; border-radius: 8px; padding: 16px; margin-bottom: 16px; box-shadow: 0 2px 6px rgba(0,0,0,0.05);">
                                    <div style="width: 100%; height: 200px; background-image: url('https://via.placeholder.com/450/FF9898/FFFFFF?text=食品大图'); background-size: cover; background-position: center; border-radius: 8px; margin-bottom: 16px;"></div>
                                    
                                    <div style="font-size: 12px; color: #FF9898; background: #FFF0F0; padding: 4px 12px; border-radius: 20px; display: inline-block; margin-bottom: 8px;">11月15日午餐</div>
                                    
                                    <div style="margin-top: 16px;">
                                        <div style="font-size: 14px; color: #666; margin-bottom: 12px;">
                                            <div style="font-weight: 500; margin-bottom: 4px;">价格：</div>
                                            <div>¥26.5</div>
                                        </div>
                                        <div style="font-size: 14px; color: #666; margin-bottom: 12px;">
                                            <div style="font-weight: 500; margin-bottom: 4px;">描述：</div>
                                            <div>牛肉鲜嫩，面条筋道，汤底浓郁。满满的一大碗，很有食欲，里面的牛肉块很大块，吃起来很过瘾。</div>
                                        </div>
                                        <div style="font-size: 14px; color: #666;">
                                            <div style="font-weight: 500; margin-bottom: 4px;">标签：</div>
                                            <div>
                                                <span class="tag">🍚 主食</span>
                                                <span class="tag">🌶️ 川菜</span>
                                                <span class="tag">🥩 高蛋白</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 添加子页面导航栏 -->
                                <div class="tab-bar">
                                    <a href="index.html" class="tab-item">
                                        <div class="tab-icon">🏠</div>
                                        <div class="tab-text">首页</div>
                                    </a>
                                    <div class="tab-item active">
                                        <div class="tab-icon">🌾</div>
                                        <div class="tab-text">粮仓</div>
                                    </div>
                                    <a href="community.html" class="tab-item">
                                        <div class="tab-icon">🍽️</div>
                                        <div class="tab-text">食坛</div>
                                    </a>
                                    <a href="profile.html" class="tab-item">
                                        <div class="tab-icon">👤</div>
                                        <div class="tab-text">我的</div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="description-column">
                <div class="card">
                    <div class="card-header">
                        <span>仓库模块功能需求</span>
                    </div>
                    <div class="card-content">
                        <div class="mermaid-diagram">
                            <pre>
graph TB
    A[全部记录] --> B[时间维度]
    A --> C[价格维度]
    A --> D[标签维度]
    B --> B1{日历视图}
    C --> C1[≤20元][>20元]
    D --> D1[主食][小吃][饮品]
                            </pre>
                        </div>

                        <div class="requirement">
                            <div class="requirement-title">1. 数据管理功能</div>
                            <div class="requirement-desc">为用户提供多维度的数据管理视图，包括时间维度、价格维度和标签维度，帮助用户从不同角度查看和管理自己的饮食记录数据。</div>
                        </div>

                        <div class="requirement">
                            <div class="requirement-title">2. 智能搜索功能</div>
                            <div class="requirement-desc">
                                <p style="margin-bottom: 8px;">支持自然语言搜索，用户可以通过输入"上周的川菜"、"30元以下午餐"等自然语言描述搜索符合条件的记录。系统能够智能解析关键词并返回相关结果。</p>
                                <p>提供图片墙视图，用户可以直观浏览历史记录图片，点击图片可查看详情。图片墙以时间倒序排列，便于用户回顾近期饮食情况。</p>
                            </div>
                        </div>

                        <!-- <div class="requirement">
                            <div class="requirement-title">3. 数据导出功能</div>
                            <div class="requirement-desc">
                                <p style="margin-bottom: 8px;">PDF周报：系统自动生成包含消费趋势图和AI健康饮食建议的周度报告，帮助用户了解自己的饮食习惯和改进方向。</p>
                                <p>Excel明细表：导出详细的饮食记录，自动分类统计价格和品类，方便用户进行更深入的数据分析。</p>
                            </div>
                        </div> -->

                        
                        <div class="requirement">
                            <div class="requirement-title">页面开发规则</div>
                            <div class="requirement-desc">
                                <p style="margin-bottom: 8px;">1. 数据查询规则：</p>
                                <ul style="margin-bottom: 16px;">
                                    <li>支持模糊匹配：食品名称、描述等文本字段支持模糊搜索</li>
                                    <li>范围查询：价格区间、时间范围等支持范围查询</li>
                                    <li>多选过滤：支持多个标签组合筛选</li>
                                    <li>分页加载：列表页面默认加载20条记录，支持下拉加载更多</li>
                                    <li>排序规则：支持按时间、价格、评分等多维度排序</li>
                                </ul>
                                
                                <p style="margin-bottom: 8px;">2. 数据展示规则：</p>
                                <ul style="margin-bottom: 16px;">
                                    <li>时间维度：日历视图显示有记录的日期，支持月份切换</li>
                                    <li>价格维度：支持自定义价格区间，提供快速选择区间</li>
                                    <li>标签维度：支持多标签组合筛选，显示已选标签</li>
                                    <li>照片墙：瀑布流布局，支持按时间/价格排序</li>
                                </ul>
                                
                                <!-- <p style="margin-bottom: 8px;">3. 数据导出规则：</p>
                                <ul>
                                    <li>PDF周报：自动生成包含消费趋势图和健康建议的周报</li>
                                    <li>Excel导出：支持自定义导出字段，自动分类统计</li>
                                </ul> -->
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <span>交互说明</span>
                    </div>
                    <div class="card-content">
                        <div class="note">
                            <strong>交互说明：</strong>
                            <ol>
                                <li>用户进入粮仓页面后，首先看到维度选择界面，包含四个选项：时间维度、价格维度、标签维度和照片墙。</li>
                                <li>选择任意维度后，进入对应的列表页面：
                                    <ul>
                                        <li>时间维度：显示日历视图，点击日期可查看当天的食物记录</li>
                                        <li>价格维度：按价格区间展示食物列表</li>
                                        <li>标签维度：按标签分类展示食物列表</li>
                                        <li>照片墙：以图片网格形式展示所有食物记录</li>
                                    </ul>
                                </li>
                                <li>在列表页面中，每个食物项都以简洁的单行形式展示：
                                    <ul>
                                        <li>左侧显示50x50px的食物图片</li>
                                        <li>中间显示食物名称（带表情符号）和时间、价格信息</li>
                                        <li>右侧显示导航箭头（❯）</li>
                                    </ul>
                                </li>
                                <li>点击任意食物项可进入详情页面查看完整信息</li>
                                <li>底部导航栏可快速切换主要功能模块</li>
                            </ol>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <span>粮仓页面 - 价格维度 - 餐品列表</span>
                    </div>
                    <div class="card-content">
                        <div class="prototype-preview">
                            <div class="prototype-nav">
                                📊 饮食记录 - 价格维度 - 餐品列表
                            </div>
                            <div class="prototype-content">
                                <div style="display: flex; align-items: center; margin-bottom: 16px;">
                                    <div style="font-size: 18px; font-weight: 500; margin-right: auto;">价格区间：¥10-20</div>
                                    <div style="font-size: 14px; color: #666; cursor: pointer;">返回价格维度</div>
                                </div>

                                <div style="background: white; border-radius: 8px; margin-bottom: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.05);">
                                    <div style="padding: 12px; display: flex; align-items: center;">
                                        <div style="width: 50px; height: 50px; border-radius: 4px; margin-right: 12px; background-image: url('https://via.placeholder.com/150/FF9898/FFFFFF?text=食品图片'); background-size: cover;"></div>
                                        <div style="flex: 1;">
                                            <div style="font-size: 15px; font-weight: 500;">红烧牛肉面 🍜</div>
                                            <div style="font-size: 12px; color: #999;">2023-11-05 · ¥15.00</div>
                                        </div>
                                        <div style="color: #999; font-size: 16px;">❯</div>
                                    </div>
                                </div>

                                <div style="background: white; border-radius: 8px; margin-bottom: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.05);">
                                    <div style="padding: 12px; display: flex; align-items: center;">
                                        <div style="width: 50px; height: 50px; border-radius: 4px; margin-right: 12px; background-image: url('https://via.placeholder.com/150/FF9898/FFFFFF?text=食品图片'); background-size: cover;"></div>
                                        <div style="flex: 1;">
                                            <div style="font-size: 15px; font-weight: 500;">珍珠奶茶 🧋</div>
                                            <div style="font-size: 12px; color: #999;">2023-11-05 · ¥18.00</div>
                                        </div>
                                        <div style="color: #999; font-size: 16px;">❯</div>
                                    </div>
                                </div>

                                <div style="background: white; border-radius: 8px; margin-bottom: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.05);">
                                    <div style="padding: 12px; display: flex; align-items: center;">
                                        <div style="width: 50px; height: 50px; border-radius: 4px; margin-right: 12px; background-image: url('https://via.placeholder.com/150/FF9898/FFFFFF?text=食品图片'); background-size: cover;"></div>
                                        <div style="flex: 1;">
                                            <div style="font-size: 15px; font-weight: 500;">三明治 🍞</div>
                                            <div style="font-size: 12px; color: #999;">2023-11-03 · ¥12.00</div>
                                        </div>
                                        <div style="color: #999; font-size: 16px;">❯</div>
                                    </div>
                                </div>

                                <div style="text-align: center; padding: 10px; color: #999; font-size: 14px;">
                                    向下滑动加载更多...
                                </div>
                                
                                <!-- 添加子页面导航栏 -->
                                <div class="tab-bar">
                                    <a href="index.html" class="tab-item">
                                        <div class="tab-icon">🏠</div>
                                        <div class="tab-text">首页</div>
                                    </a>
                                    <div class="tab-item active">
                                        <div class="tab-icon">🌾</div>
                                        <div class="tab-text">粮仓</div>
                                    </div>
                                    <a href="community.html" class="tab-item">
                                        <div class="tab-icon">🍽️</div>
                                        <div class="tab-text">食坛</div>
                                    </a>
                                    <a href="profile.html" class="tab-item">
                                        <div class="tab-icon">👤</div>
                                        <div class="tab-text">我的</div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <span>粮仓页面 - 标签维度 - 餐品列表</span>
                    </div>
                    <div class="card-content">
                        <div class="prototype-preview">
                            <div class="prototype-nav">
                                📊 饮食记录 - 标签维度 - 餐品列表
                            </div>
                            <div class="prototype-content">
                                <div style="display: flex; align-items: center; margin-bottom: 16px;">
                                    <div style="font-size: 18px; font-weight: 500; margin-right: auto;">标签：早餐</div>
                                    <div style="font-size: 14px; color: #666; cursor: pointer;">返回标签维度</div>
                                </div>

                                <div style="background: white; border-radius: 8px; margin-bottom: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.05);">
                                    <div style="padding: 12px; display: flex; align-items: center;">
                                        <div style="width: 50px; height: 50px; border-radius: 4px; margin-right: 12px; background-image: url('https://via.placeholder.com/150/FF9898/FFFFFF?text=食品图片'); background-size: cover;"></div>
                                        <div style="flex: 1;">
                                            <div style="font-size: 15px; font-weight: 500;">红烧牛肉面 🍜</div>
                                            <div style="font-size: 12px; color: #999;">2023-11-05 · ¥15.00</div>
                                        </div>
                                        <div style="color: #999; font-size: 16px;">❯</div>
                                    </div>
                                </div>

                                <div style="background: white; border-radius: 8px; margin-bottom: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.05);">
                                    <div style="padding: 12px; display: flex; align-items: center;">
                                        <div style="width: 50px; height: 50px; border-radius: 4px; margin-right: 12px; background-image: url('https://via.placeholder.com/150/FF9898/FFFFFF?text=食品图片'); background-size: cover;"></div>
                                        <div style="flex: 1;">
                                            <div style="font-size: 15px; font-weight: 500;">豆浆油条 🥢</div>
                                            <div style="font-size: 12px; color: #999;">2023-11-04 · ¥8.00</div>
                                        </div>
                                        <div style="color: #999; font-size: 16px;">❯</div>
                                    </div>
                                </div>

                                <div style="background: white; border-radius: 8px; margin-bottom: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.05);">
                                    <div style="padding: 12px; display: flex; align-items: center;">
                                        <div style="width: 50px; height: 50px; border-radius: 4px; margin-right: 12px; background-image: url('https://via.placeholder.com/150/FF9898/FFFFFF?text=食品图片'); background-size: cover;"></div>
                                        <div style="flex: 1;">
                                            <div style="font-size: 15px; font-weight: 500;">三明治 🍞</div>
                                            <div style="font-size: 12px; color: #999;">2023-11-03 · ¥12.00</div>
                                        </div>
                                        <div style="color: #999; font-size: 16px;">❯</div>
                                    </div>
                                </div>

                                <div style="text-align: center; padding: 10px; color: #999; font-size: 14px;">
                                    向下滑动加载更多...
                                </div>
                                
                                <!-- 添加子页面导航栏 -->
                                <div class="tab-bar">
                                    <a href="index.html" class="tab-item">
                                        <div class="tab-icon">🏠</div>
                                        <div class="tab-text">首页</div>
                                    </a>
                                    <div class="tab-item active">
                                        <div class="tab-icon">🌾</div>
                                        <div class="tab-text">粮仓</div>
                                    </div>
                                    <a href="community.html" class="tab-item">
                                        <div class="tab-icon">🍽️</div>
                                        <div class="tab-text">食坛</div>
                                    </a>
                                    <a href="profile.html" class="tab-item">
                                        <div class="tab-icon">👤</div>
                                        <div class="tab-text">我的</div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                

                <div class="card">
                    <div class="card-header">
                        <span>页面开发规则</span>
                    </div>
                    <div class="card-content">
                        <div class="requirement">
                            <div class="requirement-title">数据查询规则</div>
                            <div class="requirement-desc">
                                <ul>
                                    <li>支持按时间、价格、标签等多维度浏览</li>
                                    <li>支持模糊匹配、范围查询</li>
                                    <li>支持多选标签过滤</li>
                                    <li>支持分页展示结果</li>
                                    <li>支持按不同维度排序</li>
                                </ul>
                            </div>
                            <div class="requirement-title">数据展示规则</div>
                            <div class="requirement-desc">
                                <ul>
                                    <li>支持日历视图展示</li>
                                    <li>支持自定义价格区间展示</li>
                                    <li>支持多标签组合展示</li>
                                    <li>支持照片墙布局展示</li>
                                </ul>
                            </div>
                            <!-- <div class="requirement-title">数据导出规则</div>
                            <div class="requirement-desc">
                                <ul>
                                    <li>支持自动生成PDF周报</li>
                                    <li>支持自定义Excel导出</li>
                                </ul>
                            </div> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        // 这里可以添加页面交互的JavaScript代码
        document.addEventListener('DOMContentLoaded', function() {
            // 添加导航功能
            const tabItems = document.querySelectorAll('.tab-item');
            tabItems.forEach(item => {
                item.addEventListener('click', function() {
                    const tabText = this.querySelector('.tab-text').textContent;
                    if (tabText === '首页') {
                        window.location.href = 'index.html';
                    }
                    else if (tabText === '食坛') {
                        window.location.href = 'community.html';
                    }
                });
            });
            
            // 移除页面外部的导航栏
            function removeOutsideTabBars() {
                // 找到所有不在prototype-content内部的tab-bar
                const allTabBars = document.querySelectorAll('.tab-bar');
                allTabBars.forEach(tabBar => {
                    let parent = tabBar.parentElement;
                    while (parent && !parent.classList.contains('prototype-content')) {
                        if (parent === document.body || parent.classList.contains('container') || parent.classList.contains('prototype-area')) {
                            console.log('找到页面外的导航栏，移除它');
                            tabBar.style.display = 'none';
                            tabBar.style.visibility = 'hidden';
                            break;
                        }
                        parent = parent.parentElement;
                    }
                });
            }
            
            // 运行清理函数
            removeOutsideTabBars();
            
            // 为防止动态加载的内容，每秒检查一次
            setInterval(removeOutsideTabBars, 1000);
        });

        function handleBackNavigation() {
            // 添加hover效果
            const backNav = document.querySelector('.back-nav');
            if (backNav) {
                backNav.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateX(-4px)';
                });
                backNav.addEventListener('mouseleave', function() {
                    this.style.transform = 'translateX(0)';
                });
            }
            
            // 返回逻辑
            const currentView = document.querySelector('.prototype-nav').textContent;
            if (currentView.includes('时间维度')) {
                // 返回到维度选择页面
                console.log('返回到维度选择页面');
                // 这里可以添加实际的页面跳转逻辑
            } else if (currentView.includes('价格维度')) {
                // 返回到价格区间选择
                console.log('返回到价格区间选择');
            } else if (currentView.includes('标签维度')) {
                // 返回到标签选择
                console.log('返回到标签选择');
            } else if (currentView.includes('照片墙')) {
                // 返回到维度选择
                console.log('返回到维度选择');
            }
        }
    </script>
</body>
</html> 